<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>
        .box{
            width:170px;
            height:170px;
            background: darkcyan;
        }
        table{
            border:1px solid #000;
        }
        td{ 
            border:1px solid #000;
            padding:10px;
            text-align: center;
        }
        ul{
            list-style: none;
            display: flex;
            margin:0;
            padding:0;
        }
        li{
            width:200px;
            background: pink;
        }

        .zoom-enter-active{
            animation: zoomInDown .9s;
        }

        .zoom-leave-active{
            animation: zoomOutDown .9s;
        }

        .box{
            width:50%;
            height:300px;
            border:1px solid #999;
            border-radius: 10px;

        }
        .router-link-exact-active, .router-link-active{
            font-size: 30px;
            font-weight: bold;
            color:#f50;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        
        <!-- 5, 路由出口 路由匹配到的组件将渲染在这里  -->
        <router-view class="box"></router-view>

        <hr>
        <!-- 6 路由跳转 声明式 -->
        <a href="#/home">首页1</a>
        <router-link to="/home">首页</router-link>
        <router-link to="/find">发现</router-link>
        <router-link to="/mine">我的</router-link>
        <router-link to="/aboutus">联系我们</router-link>

        <router-link to="/404">404</router-link>

    </div>

    <template id="home">
        <div>
            <h2>HOme = Home = Home </h2>
        </div>
    </template>

    <template id="mine">
        <div>
            <h2>Mine - Mine - 个人中心</h2>
        </div>
    </template>
    <script>
        Vue.component('myhead',{
            template:"<h2>Head - wh2114-daydayup</h2>"
        })
        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)  (脚手架)

        // 1. 定义路由组件.
        const Home = {
            template:"#home"
        }
        const Find = {
            template:"<h2>Find - Find - Find </h2>"
        }
        const Mine = {
            template:"#mine"
        }
        const NotFound = {
            template:"<h2>404-404 - NotFound </h2>"
        }

        const Aboutus = {
            template:"<h2>关于我们 - aboutus - abouts </h2>"
        }
        // 2. 定义一些路由
        // 每个路由都需要映射到一个组件。
        const routes = [
            {path:'/home',component:Home},
            {path:'/find',component:Find},
            {path:'/mine',component:Mine},
            {path:'/aboutus',component:Aboutus},

            {
                path:"/404",component:NotFound
            }
        ]

        // 3. 创建路由实例并传递 `routes` 配置  你可以在这里输入更多的配置
        // # 表示 hash 路由 
        const router = new VueRouter({
            routes:routes ,
            mode:'hash',
            base:''
        })
        
        // 4. 路由挂载到根实例
        const vm = new Vue({
            router, // this.$router
            data:{
                title:"Vue 路由初步",
            },
            components:{
               
            },
            watch:{
                '$route':function(to,from){
                    console.log(to)
                    console.log(from)
                }
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
                
                console.log(this.$router) // 路由对象  负责路由跳转 路由导航和路由全局监听
                console.log(this.$route)  // 路由信息对象  当前激活的路由对象  路由参数 query(?)&params(:)  

            }
        }).$mount("#app")


    </script>
    <!-- 
        node 路由 根据不同的url接口 返回对应的不同的数据或者页面  (Later)
        Vue 路由 router 根据不同的url路径 pathname  匹配路由里面的 path 匹配成功就加载对应的组件(component)
        
        Vue-Router 是 Vue.js 官方的路由管理器。
        它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
        
        路由作用 实现构建单页面应用  index.html 其他页面 组件形式加载
        single-page-application     (SPA)-

        将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

        a. 掌握 配置最基本的路由 流程
        b. 路由传递参数  动态路由
        c. 嵌套路由
     -->
</body>
</html>